import { connect } from 'dva';
import React, { useState } from 'react';
import { Form, Input, Button } from 'antd';

const layout = {
  labelCol: { span: 2 },
  wrapperCol: { span: 16 },
};
const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
};

const onFinishFailed = (errorInfo) => {
  console.log('Failed:', errorInfo);
};
function Employee({customers,dispatch}) {
  const arr = customers.length;
  // console.log(arr);
  const onFinish = (values) => {
    console.log('Success:', values);
    dispatch({
      type: 'customers/add',
      payload: {
        e: {
          key:String(arr+1),
          firstName: newFirstName,
          lastName: newLastName,
          age: newAge,
          address: newAddress,
        },
      },
    });
    console.log('保存成功Success:');
  };
  const [newFirstName, setNewFirstName] = useState('');
  const [newLastName, setNewLastName] = useState('');
  const [newAge, setNewAge] = useState('');
  const [newAddress, setNewAddress] = useState('');

  return (
    <div>
      <h1>This is add page</h1>

      <Form
        {...layout}
        name="submit"
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
      >
        <Form.Item label="firstName" name="firstName" rules={[{ required: true, message: 'Please input your firstName!' }]}>
          <Input 
           value={newFirstName}
          onChange={(e) => setNewFirstName(e.target.value)}
           />
        </Form.Item>

        <Form.Item
          label="lastName"
          name="lastName"
          rules={[{ required: true, message: 'Please input your lastName!' }]}
        >
          <Input
            value={newLastName}
            onChange={(e) => setNewLastName(e.target.value)}
          />
        </Form.Item>

        <Form.Item
          label="Age"
          name="age"
          rules={[{ required: true, message: 'Please input your age!' }]}
        >
          <Input
            value={newAge}
            onChange={(e) => setNewAge(e.target.value)}
          />
        </Form.Item>

        <Form.Item
          label="Address"
          name="address"
          rules={[{ required: true, message: 'Please input your address!' }]}
        >
          <Input
            value={newAddress}
            onChange={(e) => setNewAddress(e.target.value)}
          />
        </Form.Item>

        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit">
            添加
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}
export default connect(({ customers }) => ({ customers }))(Employee);
